<template>
  <div>
    <a-row>
      <img
        id="Camera"
        style="border-radius: 20%"
        src="http://192.168.10.254:8081/"
      />
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-row>
          <!-- <a-col>&emsp;&emsp;&emsp;&emsp;&emsp;</a-col>
      <a-col>&emsp;&emsp;&emsp;&emsp;</a-col> -->
          <a-col :push="4">
            <div
              @mouseenter="onAction('forward', true)"
              @mouseleave="onAction('forward', false)"
            >
              <svg
                class="icon rotate"
                aria-hidden="true"
                style="font-size: 50px"
              >
                <use xlink:href="#icon-shang"></use>
              </svg>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <!-- <a-col>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</a-col> -->
          <a-col :push="2">
            <div
              @mouseenter="onAction('leftward', true)"
              @mouseleave="onAction('leftward', false)"
              style="transform: rotate(270deg)"
            >
              <svg
                class="icon rotate"
                aria-hidden="true"
                style="font-size: 50px"
              >
                <use xlink:href="#icon-shang"></use>
              </svg>
            </div>
          </a-col>
          <!-- <a-col>&emsp;&emsp;&emsp;</a-col> -->
          <a-col :push="4">
            <div
              @mouseenter="onAction('rightward', true)"
              @mouseleave="onAction('rightward', false)"
              style="transform: rotate(90deg)"
            >
              <svg
                class="icon rotate"
                aria-hidden="true"
                style="font-size: 50px"
              >
                <use xlink:href="#icon-shang"></use>
              </svg>
            </div>
          </a-col>
        </a-row>

        <a-row>
          <!-- <a-col>&emsp;&emsp;&emsp;&emsp;&emsp;</a-col>
      <a-col>&emsp;&emsp;&emsp;&emsp;</a-col> -->
          <a-col :push="4">
            <div
              @mouseenter="onAction('backward', true)"
              @mouseleave="onAction('backward', false)"
              style="transform: rotate(180deg)"
            >
              <svg
                class="icon rotate"
                aria-hidden="true"
                style="font-size: 50px"
              >
                <use xlink:href="#icon-shang"></use>
              </svg>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <DistanceMeasurement ref="chart_line_one" />
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        <!-- <a-button @click="onSubmit" type="primary"> 🔌 </a-button> -->
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import DistanceMeasurement from "./DistanceMeasurement.vue";

import { manualDrive } from "@/api/apilist/TestApiList";

export default defineComponent({
  setup() {
    var parameter = { direction: "", isopen: false };
    const inputNumber = ref<number>(3);
    let onAction = (direction: string, isStart: boolean) => {
      parameter.direction = direction;
      parameter.isopen = isStart;
      manualDrive(parameter).then((ref) => {
        console.log(ref.data);
      });
    };
    let onSubmit = () => {};
    return {
      onAction,
      inputNumber,
      onSubmit,
    };
  },
  components: {
    DistanceMeasurement,
  },
});
</script>
<style>
#Camera {
  width: 100%;
  height: calc(100vh - 300px);
}
</style>